<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>费用查缴</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-toast.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <style type="text/css">
    [v-cloak] {
        display: none;
    }
    *{
        font-size:0.75rem;
    }
    input[type="date"]:before {
        content: attr(placeholder);
        color: #ccc;
    }

    ::-webkit-input-placeholder {
        color: #ccc;
    }
    .zhifu{
        font-size:0.75rem;
    }
    .top_title .aui-list-item {
        padding: 0rem 0.7rem;
        background: #fff !important;
    }

    .top_title .aui-list-item-label {
        color: #333;
        width: 65px;
    }

    .summary-list {
        background-origin: #fff;
        background-size: 0px;
        border-radius: 5px !important;
        padding: 0.25rem 0;
        font-size: 0.75rem;
        width:95%;
        margin:0 auto 10px auto;
    }
    .border{
        border:1px solid #f0f0f0;
    }
    .summary-list .aui-list-item-label {
        width: 80%;
        padding-left: 0.5rem;
        font-size:0.7rem;
    }

    .summary-list .aui-list-item {
        padding: 0;
        background-size: 0px;
    }

    .summary-list .aui-list-item .aui-list-item-inner {
        border: solid 0px #ccc;
    }

    .bottomleft {
        width: 60%;
        position: fixed;
        bottom: 0;
        left: 0;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        height: 2.5rem;
        line-height: 2.5rem;
        padding-left: 0.8rem;
        font-size: 0.75rem;
        background-color: #fff;
        z-index: 999;
        border-top: 1px solid #f0f0f0;
    }
    .cost{
        text-indent: 0.9rem;
    }
    .bottomright {
        width: 40%;
        position: fixed;
        bottom: 0;
        right: 0;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        z-index: 999;
    }

    .aui-popup.aui-popup-in {
        margin-bottom: 2.5rem;
    }

    .aui-list .aui-list-item .aui-list-item-input.datetime_box {
        position: relative;
    }

    .aui-content {
        background-color: #f0f0f0;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding-bottom: 3rem;
    }
    .txtright{
        text-align: right;
        color:#888;
        font-size: 0.7rem;
    }
    .ul-title {
        padding: 4px 0 10px 5px;
        font-size: 0.75rem;
    }
    .ul-title_yfzd{
        border-bottom: 1px solid #f0f0f0;
        height: 40px;
    }

    .datetime_box input[type=text] {
        border-radius: 5px !important;
        height: 1.5rem;
        font-size: 0.7rem;
        text-align: right;
        color:#888;
    }
    .txtcenter{
        text-align: center;
        color:rgb(136, 136, 136);
    }
    .fycj_box{
        background: #fff;
        border-bottom: 1px solid #eee;
    }
    .fycj_box_more{
        background: #F9F9F9;
    }
    .borderline{
        width: 95%;
        margin: 0 auto;
        height: 50px;
        line-height: 50px;
    }
    .fr{
        float: right;
    }
    .fl{
        float: left;
    }
    .cl{
        clear:both;
    }
    .yfzd_con{
        background:#fff;
        padding:20px 0;
    }
    .countMony{
        color:red;
        padding-right: 20px;
        line-height: 30px;
    }
    .yfzd_con_input{
        padding-left:20px;
        line-height: 30px;
        font-size:0.75rem;
    }
    #tab{
        margin-top:8px;
    }
    .arrow img{
        width:15px;
        margin: 18px;
    }
    .arrow2 img{
        width:15px;
    }
    .subtxt{
         text-align: right;
         padding-right: 2.4rem;
    }
    .select_all{
         margin-top: 0.7rem;
    }
    .basic_li{
        height: 30px;
    }
    .aui-list .aui-list-item{
        min-height: 30px;
    }
    .aui-radio, .aui-checkbox{
        width:0.9rem;
        height: 0.9rem;
        left: 9px;
        top: 5px;
    }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="aui-content">
            <ul class="aui-list aui-form-list top_title">
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div style="width:62px;" class="aui-list-item-label">
                            业主
                        </div>
                        <div class="aui-list-item-input">
                            <input readonly="readonly" style="color:#333;font-size: 0.75rem;" type="text" v-model="OwnerName">
                        </div>
                    </div>
                </li>
                <li class="aui-list-item" style="padding-right:5px" v-on:click="do_choose_project()">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            资源
                        </div>
                        <div class="aui-list-item-input" style="color:#333;">
                            XXX小区
                        </div>
                        <div class="aui-list-item-label arrow2" style="width:30px;">
                            <img src="../image/arrow_r.png">
                        </div>
                    </div>
                </li>
            </ul>
            <div class="aui-tab" id="tab">
                <div id="tabbar0" class="aui-tab-item" v-bind:class="is_active1" v-on:click="randomSwitchBtn(0)">应付账单
                </div>
                <div id="tabbar1" class="aui-tab-item"  v-bind:class="is_active2" v-on:click="randomSwitchBtn(1)">缴费记录
                </div>
            </div>
            <!-- table1 -->
            <div class="yfzd_con" v-if="show_detail">
                <div v-if="show_detail_haslist">
                    <ul class="aui-list aui-form-list summary-list border">
                        <div class="ul-title ul-title_yfzd">
                        <input type="checkbox" class="aui-radio fl">
                        <div class="yfzd_con_input fl">费用类型</div><div class="fr countMony">￥84.00元</div>
                        </div>
                        <div class="cl"></div>
                        <li class="aui-list-item">
                            <div class="aui-list-item-inner" style="border-top: 0px;">
                                <div class="aui-list-item-label">
                                    起止读数
                                </div>
                                <div class="aui-list-item-input">
                                    <input class="txtright" style="color:#888;" readonly="readonly" type="text" value="62.00/99.00">
                                    <!-- <input class="txtright" style="color:#888;" readonly="readonly" type="text" v-bind:value="item.StartEndPoint"> -->
                                </div>
                            </div>
                        </li>
                        <li class="aui-list-item basic_li">
                            <div class="aui-list-item-inner" style="border-top:0px;">
                                <div class="aui-list-item-label">
                                    开始日期
                                </div>
                                <div class="aui-list-item-input txtright">
                                    2019/10/25
                                </div>
                            </div>
                        </li>
                        <li class="aui-list-item">
                            <div class="aui-list-item-inner" style="border-top: 0px;">
                                <div class="aui-list-item-label">
                                    终止日期
                                </div>
                                <div class="aui-list-item-input datetime_box">
                                <input style="color:#333;" class="time_btn" type="text" readonly v-model="EndTime" v-bind:data-value="EndTime"/>
                                </div>
                                <div class="aui-list-item-input txtright">
                                    2019/10/25
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div id="noorder" v-if="!show_detail_haslist" style="vertical-align: middle; text-align: center;margin-top:40%;">
                        <i class="icon iconfont icon-zhangdan" style="font-size:70px; color:#888"></i>
                        <h5><br />暂无相关账单</h5>
                    </div>
                </div>
            </div>
            <!-- table1 -->
            <!-- table2 -->
            <div v-if="show_history">
                <div class="fycj_box" v-if="show_history_haslist">
                    <div class="ul-title borderline">
                        2019/10/25
                        <label class="aui-list-item-right fr arrow">
                            <img src="../image/arrow_b.png">
                        </label>
                        <label class="aui-list-item-right fr arrow">
                            <img src="../image/arrow_t.png">
                        </label>
                        <label class="aui-list-item-right fr" style="color:red;">
                            ￥2861.00
                        </label>
                    </div>
                    <ul class="aui-list aui-form-list summary-list">
                        <template>
                            <li class="fycj_box_more" class="aui-list-item">
                                <div class="aui-list-item-inner" style="border-top:0px;">
                                    <div style="text-align:left;" class="aui-list-item-label txtcenter aui-ellipsis-2">
                                        <p>测试物业费</p>
                                    </div>
                                    <div style="padding-right: 2.4rem;text-align: right;width:45%;" class="aui-list-item-input txtcenter">
                                        ￥1200.00
                                    </div>
                                </div>
                            </li>
                            <!-- <li style="border-bottom: 1px solid #eee;" v-if="item2.StartTime" class="fycj_box_more" class="aui-list-item">
                                <div class="aui-list-item-inner" style="border-top:0px;">
                                    <p>（{{item2.StartTime}}-{{item2.EndTime}}）</p>
                                </div>
                            </li> -->
                        </template>
                    </ul>
                </div>
                <div id="noorder" v-if="!show_history_haslist" style="vertical-align: middle; text-align: center;margin-top:40%;">
                    <i class="icon iconfont icon-zhangdan" style="font-size:70px; color:#888"></i>
                    <h5><br />暂无相关缴费记录</h5>
                </div>
            </div>
            <!-- table2 -->
        </div>
        <div class="bottomleft" v-if="show_detail_haslist&&show_detail">
            <div v-on:click="select_all()" class="select_all fl">
                <input style="left:8px;top:2px;" class="aui-radio" type="radio" name="radio">
            </div>
            <div class="cost fl">
                合计: <span style="color:red;font-size:0.9rem;">￥588</span>
            </div>
            <div v-if="show_detail_haslist&&show_detail" class="aui-btn aui-btn-primary aui-btn-block bottomright zhifu" v-on:click="show_paymentmethod()">支付</div>
        </div>
    </div>
</body>
<script type="text/javascript " src="../script/api.js "></script>
<script type="text/javascript " src="../script/vue.js "></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/aui-actionsheet.js"></script>
<script type="text/javascript" src="../script/aui-dialog.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript" src="../script/aui-popup-new.js"></script>
<script type="text/javascript" src="js/bill_deteails.js"></script>
</html>
